<%@ page import="com.genghis.ptas.course.entity.CourseInfo" %>
<%@ page import="com.genghis.ptas.note.entity.Note" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: fengxuanzhen
  Date: 14-4-20
  Time: 上午10:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <%@include file="../../includes/index.jsp" %>
    <!--评分样式 begin-->
    <link href="ecommerce/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link href="ecommerce/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <link href="ecommerce/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!--评分样式end-->
    <link href="assets/css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="<c:url value="/css/common/global.css"/>"/>
    <link rel="stylesheet" type="text/css"
          href="<c:url value="/js/common/jquery-easyui-1.3.4/themes/bootstrap/easyui.css"/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value="/js/common/jquery-easyui-1.3.4/themes/icon.css"/>"/>
    <script src="<c:url value="/js/common/jquery-easyui-1.3.4/jquery.easyui.min.js"/>" type="text/javascript"></script>
    <script src="<c:url value="/js/common/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"/>"
            type="text/javascript"></script>
    <script src="<c:url value="/js/common/common.js"/>" type="text/javascript"></script>
    <!--文本编辑-->
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/pages/profile.css" rel="stylesheet" type="text/css"/>
    <!--文本编辑-->
    <script src="<c:url value="/js/common/scormAPI/scormAPI.js" />" type="text/javascript"></script>
    <style type="text/css">
        body {
            background-color: #FFFFFF
        }
        .margin {
            margin-left: 15%;
            margin-right: 15%;
        }
        .fontColor{
            font-size: 18px;
            color: white
        }
    </style>
    <title>课件观看</title>
    <% CourseInfo courseInfo = (CourseInfo) request.getAttribute("course");%>
    <% Note note = (Note) request.getAttribute("note");%>
</head>
<body>
<div style="background-color: #000000; height: 45px">
    <a class="navbar-brand" href="index">
        <img src="assets/img/logo.png" alt="logo" class="img-responsive"/>
    </a>
</div>
<div class="row" style="background-color: #333333">
    <div class="col-md-12">
        <!-- BEGIN BASIC CHART PORTLET-->
        <div class="portlet box grey" style="margin-left: 80px;margin-right: 80px">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-gift"></i>观看
                </div>
            </div>
            <div class="portlet-body" style="height: 520px; background-color:#3d3d3d">
                <div >
                    <div style="width: 710px; height: 501px; float: left; margin-top:-11px;margin-left:-10px">
                        <input type="hidden" id="domValue" value="${scormNodes[1].id}"/>
                        <input type="hidden" id="domHref" value="${scormNodes[1].chapterUrl}"/>

                        <iframe id="course"
                                src="${scormNodes[1].chapterUrl}"
                                closed="true" modal="true" style="overflow: hidden"
                                scrolling="auto" width="980px" height="521px">
                            您的浏览器不支持该课件播放
                        </iframe>
                    </div>

                    <div id="info" style="float: right;">
                        <div class="tabbable tabbable-custom boxless tabbable-reversed">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#tab_0" data-toggle="tab">
                                        课件信息 </a>
                                </li>
                                <li>
                                    <a href="#tab_1" data-toggle="tab">
                                        章节信息 </a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content" style="float: right">
                            <div class="tab-pane active" style="width: 340px" id="tab_0">
                                <div class="portlet box green">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-gift"></i>课件详细信息
                                        </div>
                                    </div>
                                    <div class="portlet-body form" style="background-color:#3d3d3d;height:380px;">
                                        <!-- BEGIN FORM-->
                                        <form action="#" class="form-horizontal">
                                            <div class="form-body">
                                                <ul style="text-align: left;font-size: 10px;color: honeydew">
                                                    <li>
                                                        <h1 class="fontColor">课件名称：<%=courseInfo.getCourseName()%>
                                                        </h1>
                                                    </li>
                                                    <li>
                                                        <h1 class="fontColor">
                                                            课件类型：<%=courseInfo.getShowCourseType()%>
                                                        </h1>
                                                    </li>
                                                    <li>
                                                        <h1 class="fontColor">章节总数：<%=courseInfo.getChapterNum()%>
                                                        </h1>
                                                    </li>
                                                    <li>
                                                        <h1 class="fontColor">
                                                            课件平均得分：<%=courseInfo.getAverageScore()%>
                                                        </h1>
                                                    </li>
                                                    <li>
                                                        <h1 class="fontColor">课件质量：<%=courseInfo.getShowQuality()%>
                                                        </h1>
                                                    </li>
                                                    <li>
                                                        <h1 class="fontColor">上传人：<%=courseInfo.getUpUserName()%>
                                                        </h1>
                                                    </li>
                                                    <li>
                                                        <input type="range" value="4" step="0.25" id="backing4">

                                                        <div class="rateit" data-rateit-backingfld="#backing4"
                                                             data-rateit-resetable="false"
                                                             data-rateit-ispreset="true" data-rateit-min="0"
                                                             data-rateit-max="5">
                                                        </div>
                                                        <button class="btn btn-small btn-primary" type="button"
                                                                onclick="submitScore('<%=courseInfo.getId()%>')">
                                                            点击评分
                                                        </button>
                                                    </li>
                                                </ul>

                                            </div>
                                        </form>
                                        <!-- END FORM-->
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" style="width: 340px;" id="tab_1">
                                <div class="portlet box green">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-gift"></i>章节信息
                                        </div>
                                    </div>
                                    <div class="portlet-body form" style="background-color:#3d3d3d; height:370px">
                                        <!-- BEGIN FORM-->
                                        <form action="#" class="form-horizontal">
                                            <div class="form-body">
                                                <div id="menuTree" class="ztree">
                                                    <%--style="width:90%;height: 100%;border: 1px solid #D0D0D0;float: left;overflow-x:auto;padding:10px;">--%>
                                                </div>
                                            </div>
                                        </form>
                                        <!-- END FORM-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- END BASIC CHART PORTLET-->
    </div>
</div>
<div style="margin-left: 80px;margin-right: 80px">

    <div id="tab" class="tab-pane active" style="margin-top: -260px ">
        <div id="accordion1" class="panel-group">
            <div class="col-md-12" style="width: 820px">
                <!-- BEGIN EXTRAS PORTLET-->
                <div class="portlet box grey">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-reorder"></i>我的笔记
                        </div>
                        <div class="tools">
                            <a href="javascript:" class="collapse" id="collapse">
                            </a>
                        </div>
                        <div class="actions">
                            <a href="javascript:" onclick="save(<%=note.getId()%>)" class="btn red btn-sm">
                                <i class="fa fa-plus"></i> 保存
                            </a>
                        </div>
                    </div>
                    <div class="portlet-body form" id="portlet-body">
                        <!-- BEGIN FORM-->
                        <form action="#" class="form-horizontal form-bordered">
                            <div class="form-body">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label for="addNote"></label>
                                        <textarea class="wysihtml5 form-control" id="addNote"
                                                  rows="6"><%=note.getNoteContent()%>
                                        </textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- END FORM-->
                    </div>
                </div>
                <!-- END EXTRAS PORTLET-->
            </div>
            <div class="col-md-12" style="float: right; width: 450px;height: 260px;">
                <!-- BEGIN EXTRAS PORTLET-->
                <!-- END EXTRAS PORTLET-->
                <div class="portlet box blue" style="margin-left:-30px">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-reorder"></i>相关笔记
                        </div>
                        <div class="actions">
                            <a class="btn default btn-sm" href="javascript:void(0);" onclick="publicNote()">
                                <i class="fa fa-pencil"></i>
                                更多
                            </a>
                        </div>
                    </div>
                    <div class="portlet-body" style="height: 180px">
                        <h5>${noteRelated.noteName}</h5>
                        <textarea class="form-control" style="width: 98%;height: 98%">${noteRelated.noteContent}</textarea>

                        <div id="pie_chart_1" class="col-md-10">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="margin-bottom: 300px;">
        <div class="col-md-12 sale-product">
            <h2>您可能感兴趣的</h2>

            <div class="bxslider-wrapper">
                <ul class="bxslider" id="interested" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="5"
                    data-slide-margin="15">
                </ul>
            </div>
        </div>

    </div>

</div>

</body>
</html>
<!--评分样式begin-->
<script type="text/javascript" src="ecommerce/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="ecommerce/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script src="ecommerce/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->
<script src="ecommerce/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
<script type="text/javascript" src='ecommerce/plugins/zoom/jquery.zoom.min.js'></script>
<!-- product zoom -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- for slider-range -->
<script src="ecommerce/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script src="assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->
<script src="assets/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
<!--评分样式end-->

<!-- 文本编辑器使用样式 -->

<script src="assets/scripts/custom/components-editors.js"></script>
<%--<script type="text/javascript" src="assets/plugins/ckeditor/ckeditor.js"></script>--%>
<script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<script src="assets/plugins/bootstrap-markdown/lib/markdown.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-markdown/js/bootstrap-markdown.js" type="text/javascript"></script>
<!-- 结束 -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script src="assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->
<script src="assets/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
<script type="text/javascript" src='assets/plugins/zoom/jquery.zoom.min.js'></script>
<!-- product zoom -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- for slider-range -->
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="<c:url value="/js/common/common.js"/>" type="text/javascript"></script>
<base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()%><c:url value="/"/>"/>

<script type="text/javascript" src="assets/scripts/app.js"></script>
<script src="assets/scripts/custom/components-editors.js"></script>
<script src="assets/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(document).ready(function () {
    App.init();
    ComponentsEditors.init();
//    App.initSliderRange();
    App.initUniform();
    App.initBxSlider();
    Index.initLayerSlider();
    App.initImageZoom();
    App.initTouchspin();
    $.fn.zTree.init($("#menuTree"), settingMenu, zNodes);
    var treeObj = $.fn.zTree.getZTreeObj("menuTree");
    treeObj.expandAll(true);
    initInterestedCourse();
    $("#collapse").click(function () {
        $("#portlet-body").slideToggle("slow");
    });
});
var zNodesMenu;
var zTree;

var settingMenu = {
    view: {
        expandSpeed: "fast",
        fontCss: setFontCss
    },
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId"
        },
        key: {
            name: "name"
        },
        keep: {
            parent: true
        }
    },
    callback: {
        onClick: zTreeOnClick
    }
};

var zNodes = [
    <c:forEach var="MenuPerm" items="${scormNodes}">
    {id: "${MenuPerm.xmlChapterId}",
        pId: "${MenuPerm.parentId}",
        name: "${MenuPerm.chapterName}" + "(${MenuPerm.lessonStatus})",
        status: "${MenuPerm.lessonStatus}",
        href: "${MenuPerm.chapterUrl}",
        sco: "${MenuPerm.id}"},
    </c:forEach>
];

function setFontCss(treeId, treeNode) {
    if(treeNode.status == "未完成"){
        return {color:"red", font_size:"40px" };
    }
    else if(treeNode.status == "未开始"){
        return {color:"#FFA500"};
    }
    else{
        return {color:"#9999FF"};
    }
}

function zTreeOnClick(event, treeId, treeNode) {
    if (treeNode.href == "") {
        $.messager.alert("提示", "请选择正确的节点！", "", function () {
        });
    } else {
        $("#domValue").attr("value", treeNode.sco);
        $("#domHref").attr("value", treeNode.href);
        selectEnterType(treeNode.sco, treeNode.href);
    }
}

function selectEnterType(id, href) {
    $.messager.confirm("提交", "是否继续上次观看？", function (r) {
        if (r) {
            $.ajax({
                url: basePath + "courseRegister/selectEnterType",
                async: false,
                data: {
                    id: id,
                    entry: "resume"
                },
                dataType: "json",
                type: "POST",
                success: function () {
                    $("#course").attr("src", href);
                },
                error: doError
            })
        }
        else {
            $.ajax({
                url: basePath + "courseRegister/selectEnterType",
                async: false,
                data: {
                    id: id,
                    entry: "ab-initio"
                },
                dataType: "json",
                type: "POST",
                success: function () {
                    $("#course").attr("src", href);
                },
                error: doError
            })
        }

    })
}

//$(document).ready(function () {
//    $.fn.zTree.init($("#menuTree"), settingMenu, zNodes);
//    var treeObj = $.fn.zTree.getZTreeObj("menuTree");
//    treeObj.expandAll(true);
//});
function score() {
    $('#score').popover('toggle')
}

function submitScore(courseId) {
    $.ajax({
        url: basePath + "courseRegister/submitScore",
        data: {
            courseId: courseId,
            score: $("#backing4").val()
        },
        dataType: "json",
        type: "POST",
        success: function () {
            $.messager.alert("成功", "评分成功！", "", function () {
            })
        },
        error: doError
    })

}

function save(noteId) {
    $.ajax({
        url: basePath + "note/editNote",
        async: false,
        data: {
            id: noteId,
            noteContent: $("#addNote").val(),
            createDate: '<%=note.getCreateDate()%>',
            noteName: '<%=note.getNoteName()%>',
            noteType: '<%=note.getNoteType()%>',
            userId: '<%=note.getUserId()%>'
        },
        dataType: "json",
        type: "POST",
        success: function () {
            $.messager.alert("成功", "保存成功！", "", function () {
            })
        },
        error: doError
    })
}

function interested(data) {
    var html;
    for (var i in data) {
        html += "<li>" +
                "<div class='product-item'>" +
                    "<div class='pi-img-wrapper'>" +
                    "<img src='" + data[i].photoUrl + "'class='img-responsive' alt='Berry Lace Dress' style='height:140px;width:100%'>" +

                        "<div>" +
                        "<a onclick='registerCourse("+data[i].id+")' class='btn btn-default'>注册</a>" +
                        "<a onclick='watchCourseInfo("+data[i].id+")' class='btn btn-default'>课件信息</a>" +
                        "</div>" +
                    "</div>" +
                "<h3>" +
                "<a onclick='watchCourseInfo("+data[i].id+")'>" + data[i].courseName + "</a>" +
                "</h3>" +

                "<div class='pi-price'></div>" +
                "<a onclick='collectionCourse("+data[i].id+")'class='btn btn-default add2cart'>收藏</a>" +
                "</div>" +
                "</li>"
    }
    $("#interested").html(html);
}

function initInterestedCourse() {
    $.ajax({
        url: basePath + "query/queryInterestedCourse",
        async: false,
        data: {
            courseType: "<%=courseInfo.getCourseType()%>"
        },
        dataType: "json",
        type: "POST",
        success: function (data) {
            interested(data);
            App.initBxSlider();
        },
        error: function (data) {

        }
    })
}
function registerCourse(courseId) {
    $.ajax({
        url: basePath + "courseRegister/addCourseRegister",
        async: false,
        data: {
            courseId: courseId,
            totalTime: "0000:00:00.00"
        },
        dataType: "json",
        type: "POST",
        success: function (judge) {
            if (judge) {
                bootbox.alert("注册成功！");
            } else {
                bootbox.alert("您已注册可以直接观看！");
            }

        },
        error: function () {
            bootbox.alert("注册失败！");
        }
    })
}

function watchCourseInfo(courseId) {
    location.href = basePath + "course/courseInfoDo?id=" + courseId;
}

function publicNote(){
    location.href = basePath + "public/publicityNote?search=";
}

function collectionCourse(courseId) {
    $.ajax({
        url: basePath + "courseRegister/collectionCourse",
        async: false,
        data: {
            courseId: courseId
        },
        dataType: "json",
        type: "POST",
        success: function (judge) {
            if (judge) {
                bootbox.alert("收藏成功！");
            } else {
                bootbox.alert("您已收藏！");
            }
        },
        error: function () {
            bootbox.alert("请先登录！");
            $.messager.alert("失败", "", "", function () {
            })
        }
    })
}


</script>
